<template>
    <div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
			<el-form-item label="分配老师" prop="teacher_name">
                <el-input v-model="queryParams.teacher_name" placeholder="请输入姓名" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
            </el-form-item>
			<el-form-item label="配置时间">
                <el-date-picker
					v-model="dateRange"
					type="datetimerange"
					value-format="yyyy-MM-dd HH:mm:ss"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					:default-time="['00:00:00', '23:59:59']"
					align="right">
				</el-date-picker>
            </el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row type="flex" class="mb8" justify="space-between" :gutter="10">
            <el-col :span="1.5">
                <el-button type="primary" @click="dialogVisible = true">选择老师</el-button>
            </el-col>
        </el-row>

		<el-table v-loading="loading" :data="tableList">
			<el-table-column label="分配老师" align="center" prop="teacher_name" />
			<el-table-column label="配置时间" align="center" prop="update_time" />
			<el-table-column label="操作" align="center" width="100px" fixed="right">
                <template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-delete" @click="deleteTeacher(scope.row)">删除</el-button>
                </template>
            </el-table-column>
		</el-table>

		<el-dialog title="添加老师" :visible.sync="dialogVisible" width="625px" :close-on-click-modal="false">
			<span>范围：</span>
			<el-radio-group v-model="teacherType" @input="changeTeacher">
				<el-radio :label="0">指定老师</el-radio>
				<el-radio :label="1">全部老师</el-radio>
			</el-radio-group>
			<br/><br/><br/>
			<el-transfer
				v-if="!teacherType"
				v-model="teacherIds"
				:data="teacherList"
				:titles="['用户列表', '接量老师名单']"
				filterable
				:filter-method="filterMethod"
				filter-placeholder="请输入老师名称"
			></el-transfer>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addTeacher">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { aifanfanTeacherList, teacherDelete, teacherAdd } from "@/api/placement";
import { getOptionListT } from "@/api/programme";

export default {
	data() {
		return {
			loading: true,
			dateRange: [],
			queryParams: { page: 1, pageSize: 20},
			tableList:[],
			dialogVisible: false,
			teacherList:[],
			teacherType: 0,
			teacherIds: [],
			filterMethod(query, item) {
          		return item.label.indexOf(query) > -1;
        	},
		};
	},
    created() {
        this.getList()
		this.getTeacher()
    },
   	methods: {
      	getList() {
			this.loading = true;
			this.dateRange = Array.isArray(this.dateRange) ? this.dateRange : [];
			this.queryParams.create_time_start = this.dateRange[0];
    		this.queryParams.create_time_end = this.dateRange[1];
            
			aifanfanTeacherList(this.queryParams).then(res => {
				this.tableList = res.data
				this.loading = false;
			});
      	},
		/** 搜索按钮操作 */
		handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.dateRange = []
            this.handleQuery();
        },
		deleteTeacher(rows){
            this.$modal.confirm('删除老师后，系统将无法为该老师自动分配手机号；手动分配时，也无法找到该老师。是否仍然删除？？').then(function() {
                return teacherDelete({id: rows.id});
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
        },
		getTeacher(){
			getOptionListT().then((res) => {
				const data = res.data;
				data.forEach((ele) => {
					this.teacherList.push({
						key: ele.id,
						label: ele.wechat_name
					});
				});
			})
		},
		changeTeacher(e) {
			this.teacherType = e
			if(e){
				this.teacherIds = this.teacherList.map(item => item.key)
			}else{
				this.teacherIds = []
			}
		},
		addTeacher(){
			teacherAdd({ids:this.teacherIds}).then((res) => {
				this.$modal.msgSuccess("添加成功");
				this.getList();
				this.dialogVisible = false
			})
		}
 	}
};
</script>

<style lang="scss" scoped>
::v-deep .el-radio__original {
  display: none !important;
}
</style>
